<%@ page contentType="text/html; charset=UTF-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>消息窗口</title>
<link rel="stylesheet" type="text/css" href="${pageContext.servletContext.contextPath}/jquery-easyui/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="${pageContext.servletContext.contextPath}/jquery-easyui/themes/icon.css">
<script type="text/javascript" src="${pageContext.request.contextPath}/jquery-easyui/jquery.min.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/jquery-easyui/jquery.easyui.min.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/jquery-easyui/locale/easyui-lang-zh_CN.js"></script>
</head>
<body>
  <button type="button" onclick="showMessage()">显示消息框</button>
  <button type="button" onclick="alertMessage()">警告消息框</button>
  <button type="button" onclick="confirmMessage()">确认消息框</button>
  <button type="button" onclick="promptMessage()">提示消息框</button>
  <button type="button" onclick="progressMessage()">进展消息框</button>
  <button type="button" onclick="closeProgressMessage()">关闭进展消息框</button>
  <script type="text/javascript">
    //设置消息窗口的默认属性值
    $.messager.defaults = {
      ok : "是",
      cancel : "否",
      onClose : function () {},
      onOpen: function () {}
    };
    function showMessage() {
      $.messager.show({
        //消息的显示类型。可用值：null，slide（默认值），fade，show
        showType : 'show',
        //消息完全显示的过渡时间，默认值为600（单位：毫秒）
        showSpeed : 1000,
        //消息窗口的宽度。默认值为250（单位是px）
        width : 200,
        //消息窗口的高度。默认值为100（单位是px）
        height : 150,
        title : '消息的标题',
        msg : '消息文本',
        //消息窗体的自定义样式
        /* style : {
          right: '',
          top: document.body.scrollTop+document.documentElement.scrollTop,
          bottom: ''
        }, */
        //消息窗体自动关闭的超时值。值为0表示不会自动关闭，除非用户手动关闭。默认值为4（单位是秒）
        timeout: 2
      });
    }
    function alertMessage() {
      /* 参数列表：title，msg，icon，fn
      title：在头部面板显示的标题文本
      msg：显示的消息文本
      icon：显示的图标图像
      fn：在窗口关闭的时候触发该回调函数 */
      $.messager.alert('警告', '消息内容', 'warning', function () {
        console.log("关闭警告消息窗口");
      })
    }
    function confirmMessage() {
      /* 参数列表：title，msg，fn
      title：在头部面板显示的标题文本
      msg：显示的消息文本
      fn(b)：点击“确定”按钮的时侯将传递一个true值给回调函数，否则传递一个false值 */
      $.messager.confirm('确认', '消息内容', function (value) {
        alert("你选择的是" + value);
      });
    }
    function promptMessage() {
      /* 参数列表：title，msg，fn
      title：在头部面板显示的标题文本
      msg：显示的消息文本
      fn(val)：在用户输入一个值参数的时候执行的回调函数 */
      $.messager.prompt('提示', '消息内容', function (value) {
        //可选的回调函数
        alert("你输入的内容为：" + value);
      });
    }
    function progressMessage() {
      /* 参数列表：title，msg，fn
      title：在头部面板显示的标题文本，默认值为空
      msg：显示的消息文本，默认值为空
      text：在进度条上显示的文本。默认值为undefined
      interval：每次进度更新的间隔时间。默认值为300（单位是毫秒） */
      $.messager.progress({
        title : '进度',
        msg : '消息',
        //文本，默认值为undefined
        //txt: undefined,
        //每次进度更新的时间间隔，默认值为300（单位：毫秒）
        interval : 250
      });
    }
    function closeProgressMessage() {
      //关闭进度消息窗口
      $.messager.progress('close');
    }
  </script>
</body>
</html>